<template lang="">
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"> -->
            <input type="checkbox" v-model="isAll">
        </label>
        <span>
            <span>已完成{{doneTodo}}</span> / 全部{{total}}
        </span>
        <button @click="clearAllTodo">清除已完成的任务</button>
    </div>
</template>
<script>
export default {
    name:"MyFooter",
    props:['todos'],
    data(){
        return{

        }
    },
    methods: {
        clearAllTodo(){
            this.$emit('clearAllTodo')
        }
    },
    computed:{
        total(){
            return this.todos.length;
        },
        doneTodo(){
            // let total=0;
            // this.todos.forEach(tosdo => {
            //     total++
            // });
            // return total;

            // return this.todos.reduce((pre,current)=>{
            //     console.log('@',pre,current)
            //     return pre + (current.done?1:0);
            // },0)
            return this.todos.reduce((pre,current)=>pre+(current.done?1:0),0)
        },
        isAll:{
            get(){
                return this.doneTodo === this.total && this.total > 0 
            },
            set(value){
                this.$emit('checkAllTodo',value)
            }
        }
    }
}
</script>
<style lang="">
    
</style>